<div class="toolbar"></div>
<div class="p-3">
    <div class="card mb-3">
        <h5 class="card-header">消息提示</h5>
        <div class="card-body">
            <p class="text-muted">每次执行对应操作时，需要显示操作的结果。提示信息通常会自动消失，重要的消息可以设置常驻。</p>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-3">
                <div class="card-header bg-white border-bottom d-flex justify-content-between">
                    <span>简单例子</span>
                    <a href="https://www.cool1024.com/gitbook/TOAST.html" target="blank">参考文档</a>
                </div>
                <div class="card-body m-btn">
                    <button (click)="showToast('success')" tsBtn="success">Success</button>
                    <button (click)="showToast('info')" tsBtn="info">Info</button>
                    <button (click)="showToast('warning')" tsBtn="warning">Warning</button>
                    <button (click)="showToast('danger')" tsBtn="danger">Danger</button>
                    <button (click)="showHold()" tsBtn>我会一直挂着</button>
                    <button (click)="showCustom()" tsBtn="dark">Custom</button>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-3">
                <div class="card-header border-bottom">参考代码</div>
                <div class="card-body">
                    <ts-prism [code]="simpleCode" language="typescript"></ts-prism>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header border-bottom">简单提示消息-暂不可用</div>
        <div class="card-body">
            <div class="alert alert-success" role="alert">
                A simple primary alert—check it out!
            </div>
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <strong>
                    <i tsIcon="warning"></i>
                    Holy guacamole!</strong> You should check in on some of
                those fields below.
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="alert alert-danger" role="alert">
                <h4 class="alert-heading">Well done!</h4>
                <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit
                    longer so that you can see how spacing within an alert works with this kind of content.</p>
                <hr>
                <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
            </div>
        </div>
    </div>
</div>